<template>
  <div>
    <header class="component-header">
      <div class="header-content">
        <div 
          class="h-left" 
          @click="toHomePage"
        >
          <el-image 
            src="https://www.ketangpai.com/images/common/logo_blue.png" 
            alt="课堂派" 
            class="logo-img"
          />
        </div>

        <el-menu 
          :default-active="activeIndex" 
          mode="horizontal"
          active-text-color="#4285f4"
          class="el-menu-demo"
        >
          <el-menu-item 
            index="1" 
            class="menu-item"
          >
            我的课堂
          </el-menu-item>
        </el-menu>
                
        <RightHeader />
      </div>
    </header>
  </div>
</template>

<script>
import RightHeader from '../RightHeader.vue'

export default {
    name: 'MainHeader',
    components: {
        RightHeader
    },
    data() {
        return {
            activeIndex: '1'
        }
    },
    methods: {
        toHomePage() {
            this.$router.push('/')
        }
    }
}
</script>

<style lang="less" scoped>
.component-header {
    height: 64px;
    width: 100%;
    margin-bottom: 12px;
}

.header-content {
    position: relative;
    background-color: #fff;
    top: -7px;
    height: 60px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 10px #ccc;
}

.h-left {
    cursor: pointer;
    flex: 7;
}

.logo-img {
    width: 120px;
    height: 50px;
}

.el-menu-demo {
    flex: 6;
}

.menu-item {
    font-weight: 800;
    font-size: large;
}
</style>